<template>
  <el-collapse v-model="activeNames">
    <el-collapse-item name="basicInfo">
      <template #title>
        <span class="text-base"
          ><el-icon class="mr-4px v-text-top" color="#0052cc"><Tickets /></el-icon>基本信息</span
        >
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="商机姓名">{{ business.name }}</el-descriptions-item>
        <el-descriptions-item label="客户名称">{{ business.customerName }}</el-descriptions-item>
        <el-descriptions-item label="商机金额（元）">
          {{ erpPriceInputFormatter(business.totalPrice) }}
        </el-descriptions-item>
        <el-descriptions-item label="预计成交日期">
          {{ formatDate(business.dealTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="下次联系时间">
          {{ formatDate(business.contactNextTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="商机状态组">
          {{ business.statusTypeName }}
        </el-descriptions-item>
        <el-descriptions-item label="商机阶段">{{ business.statusName }}</el-descriptions-item>
        <el-descriptions-item label="备注">{{ business.remark }}</el-descriptions-item>
      </el-descriptions>
    </el-collapse-item>
    <el-collapse-item name="systemInfo">
      <template #title>
        <span class="text-base"
          ><el-icon class="mr-4px v-text-top" color="#0052cc"><Tickets /></el-icon>系统信息</span
        >
      </template>
      <el-descriptions :column="2" border>
        <el-descriptions-item label="负责人">{{ business.ownerUserName }}</el-descriptions-item>
        <el-descriptions-item label="最后跟进时间">
          {{ formatDate(business.contactLastTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="创建人">{{ business.creatorName }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">
          {{ formatDate(business.createTime) }}
        </el-descriptions-item>
        <el-descriptions-item label="更新时间">
          {{ formatDate(business.updateTime) }}
        </el-descriptions-item>
      </el-descriptions>
    </el-collapse-item>
  </el-collapse>
</template>
<script setup lang="ts">
import { Tickets } from '@element-plus/icons-vue'
import * as BusinessApi from '@/api/crm/business'
import { formatDate } from '@/utils/formatTime'
import { erpPriceInputFormatter } from '@/utils'

const { business } = defineProps<{
  business: BusinessApi.BusinessVO
}>()

// 展示的折叠面板
const activeNames = ref(['basicInfo', 'systemInfo'])
</script>
<style lang="scss" scoped>
:deep(.el-descriptions__cell) {
  width: 25%;
}
</style>
